<!DOCTYPE html>
<html lang="en">
<!-- Head -->
<head>

    <title>Backgammon Wars</title>

    <!-- Meta-Tags -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <!-- style CSS -->
    <link rel="stylesheet" href="css/login.css" type="text/css" media="all">

    <!-- fontawesome -->
    <link rel="stylesheet" href="css/font-awesome.min.css" type="text/css" media="all">
    <!-- google fonts -->
    <link href="//fonts.googleapis.com/css?family=Mukta:300,400,500" rel="stylesheet">

</head>
<!-- //Head -->

<!-- Body -->
<body>

    <section class="main">
        <div class="content-w3ls">
            <div class="text-center icon">
                <span class="fa fa-meetup"></span>
            </div>
            <div class="content-bottom">
                <div class="field-group">
                    <span class="fa fa-user" aria-hidden="true"></span>
                    <div class="wthree-field">
                        <input name="username" id="username" type="text" value="" placeholder="用户名" required>
                    </div>
                </div>
                <div class="field-group">
                    <span class="fa fa-lock" aria-hidden="true"></span>
                    <div class="wthree-field">
                        <input name="password" id="password" type="Password" placeholder="密码">
                    </div>
                </div>
                <div class="wthree-field">
                    <button id="submit" type="submit" class="btn">登录</button>
                </div>
                <ul class="list-login">
                    <a href="#" class="text-right">忘记密码?</a>
                </ul>
                <ul class="list-login-bottom">
                    <li class="">
                        <a href="register.html" class="">没有账号? 点击注册></a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="copyright">
            <p>© 2020 Meetup signin form. All rights reserved | Design by <a href="http://w3layouts.com">W3layouts</a> </p>
        </div>
    </section>

</body>
<!-- //Body -->


<script src="js/jquery.min.js"></script>
<script>
    let username = $("#username");
    let password = $("#password");
    $("#submit").click(function () {
        if (username.val() == ''){
            alert("用户名不能为空");
            username.focus()
            return;
        }
        if (password.val() == ''){
            alert("密码不能为空");
            password.focus()
            return;
        }
        $.ajax({
            url: 'user/login',
            method: 'post',
            data: {
                'username': username.val(),
                'password': password.val()
            },
            success: function (result) {
                if (result.state == 'SUCCESS'){
                    window.location.href = 'index.html'
                }else {
                    alert("用户名或密码错误")
                    username.val('');
                    password.val('')
                    username.focus()
                }
            },
            error: function () {
                alert("登录失败! 请检查网络连接是否正常")
            }
        })
    })
</script>

</html>
